<template>
  <el-card style="margin: 10px 20px 5px 20px">
    <span style="line-height:40px;font-size:20px;">签约详情</span>
  </el-card>
  <el-card style="margin:0 20px;">
    <span style="line-height:30px;font-size:20px;">居民信息</span>
    <el-form label-width="80px" label-position="left">
      <el-row :gutter="30">
        <el-col :span="6">
          <el-form-item label="姓名">
            <el-input border-color="fff" v-model="searchDetailForm.resname"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="身份证号" >
            <el-input border-color="fff" v-model="searchDetailForm.idNumber"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="性别">
            <el-input border-color="fff"  v-model="searchDetailForm.gender"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="年龄" >
            <el-input border-color="fff" v-model="searchDetailForm.age"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="6">
          <el-form-item label="联系电话">
            <el-input border-color="fff" v-model="searchDetailForm.phone"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="现居地">
            <el-input border-color="fff" v-model="searchDetailForm.presentAddress"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="居民标签">
            <el-row :gutter="10">
              <el-col :span="12" v-if="residentTeg.length>0">
                <el-tag type="primary">
                  <span>{{residentTeg[0].residentTegStatus}}</span>
                </el-tag>
              </el-col>
              <el-col :span="12" v-if="residentTeg.length>1">
                <el-tag type="primary">
                  <span>{{residentTeg[1].residentTegStatus}}</span>
                </el-tag>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col >
          <el-form-item label="家庭成员">
            <el-row :gutter="10" v-if="familyList.length>0">
              <el-col :span="12" >
                <el-tag type="primary">
                  <span>{{familyList[0].familyMembers}}</span>
                </el-tag>
              </el-col>
              <el-col :span="12" v-if="familyList.length>1">
                <el-tag type="primary">
                  <span>{{familyList[0].familyMembers}}</span>
                </el-tag>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
    <span style="line-height:30px;font-size:20px;">签约信息</span>
    <el-form label-width="80px" label-position="left">
      <el-row :gutter="30">
        <el-col :span="6">
          <el-form-item label="签约编号">
            <el-input border-color="fff" v-model="searchContractForm.contractId" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="签约状态">
            <el-input readonly="待审核" v-model="searchContractForm.contractStatus" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="签约机构">
            <el-input border-color="fff" v-model="searchContractForm.contractAgent"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="签约团队">
            <el-input border-color="fff" v-model="searchContractForm.contractTeam"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="6">
          <el-form-item label="签约医生">
            <el-input border-color="fff" v-model="searchContractForm.contractDoctor"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="服务包">
            <el-input border-color="fff" v-model="searchContractForm.contractservicePackage"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="签约周期">
            <el-input border-color="fff" v-model="searchContractForm.contractCycle"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="费用" v-model="searchContractForm.cost">
            <el-input border-color="fff"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="6">
          <el-form-item label="签约类型">
            <el-input border-color="fff" v-model="searchContractForm.contractType"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="申请时间">
            <el-input border-color="fff" v-model="searchContractForm.applicationTime"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="生效时间">
            <el-input border-color="fff" v-model="searchContractForm.effectiveTime"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="24">
          <el-form-item label="签约备注">
            <el-input type="textarea" border-color="fff" v-model="searchContractForm.signingRemarks"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="router.push('/Edit')">编辑签约信息</el-button>
      <el-button type="success" @click="auditdialogVisiable=true">审核通过</el-button>
      <el-button type="danger" @click="dialogVisiable=true">驳回</el-button>
      <el-button @click="router.push('/Edit')" >返回</el-button>
    </template>
  </el-card>
<!--驳回弹窗-->
  <el-dialog title="驳回确认" v-model="dialogVisiable" width="30%">
    <el-descriptions direction="horizontal" border>
      <el-descriptions-item label="驳回原因*">
        <el-input placeholder="请输入驳回原因" v-model="暂未绑定驳回原因"></el-input>
      </el-descriptions-item>
    </el-descriptions>
    <template #footer>
      <el-button type="primary" plain @click="cancelRejectReason">取消</el-button>
      <el-button type="primary" @click="insertRejectReason">确定</el-button>
    </template>

  </el-dialog>
<!--  审核确认弹窗-->
  <el-dialog title="审核确认" v-model="auditdialogVisiable" width="30%">
    <span>确定要审核通过吗？</span>
    <template #footer>
      <el-button   @click="cancel">取消</el-button>
      <el-button type="primary" plain @click="updateAuditStatus">确定</el-button>
    </template>
  </el-dialog>
</template>


<script setup>

import router from "@/router";
import {ref} from "vue";
const dialogVisiable = ref(false);
const auditdialogVisiable = ref(false);
//定义数组用来保存居民标签
const residentTeg = ref([])
//定义数组用来保存居民家庭成员
const familyList = ref([])

//定义对象用来保存居民详情中的普通数据
const searchDetailForm = ref({
  resname:'',
  idNumber:'',
  gender:'',
  age:'',
  phone:'',
  presentAddress :''
})
//定义对象用来保存居民签约信息
const searchContractForm = ref({
  contractId:'',
  contractStatus:'',
  contractAgent:'',
  contractTeam:'',
  contractDoctor:'',
  contractservicePackage:'',
  contractCycle:'',
  cost:'',
  contractType:'',
  applicationTime:'',
  effectiveTime:'',
  signingRemarks:''
})

const cancelRejectReason = () => {
  dialogVisiable.value = false
}
const insertRejectReason = () => {
  //更新待签约状态为驳回同时增加驳回原因
  dialogVisiable.value = false
}
const updateAuditStatus = () => {
  //更新待签约状态为已签约
  auditdialogVisiable.value = false
}
const cancel = () => {
  auditdialogVisiable.value = false
}


</script>


<style scoped>

</style>